<!doctype html>
<html class="no-js" lang="zxx">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <script src="../static/js/echarts.min.js"></script>
        <title>电商交易数据可视化</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Place favicon.ico in the root directory -->
        

        <!-- All css here -->
        <link rel="stylesheet" href="../static/css/bootstrap.min.css">
        <link rel="stylesheet" href="../static/css/fontawesome-all.min.css">
        <link rel="stylesheet" href="../static/css/animate.css">
        <link rel="stylesheet" href="../static/css/slick.css">
        <link rel="stylesheet" href="../static/css/meanmenu.css">
        <link rel="stylesheet" href="../static/css/default.css">
        <link rel="stylesheet" href="../static/css/style.css">
        <link rel="stylesheet" href="../static/css/responsive.css">

        <style>
        .example-div {
            width: 900px;
            height: 700px;
            top: -100px;
            bottom: 0;
            right: 100px;
        }
        </style>

    </head>
    <body>
        <!--[if lte IE 9]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="/">upgrade your browser</a> to improve your experience and security.</p>
        <![endif]-->
        <!--  ====== preloader=============================================  -->
        <div id="preloader">
            <div id="loading">
                <div id="loading-center">
                    <div id="loading-center-absolute">
                    <div class="object" id="object_one"></div>
                    <div class="object" id="object_two"></div>
                    <div class="object" id="object_three"></div>
                    <div class="object" id="object_four"></div>
                    <div class="object" id="object_five"></div>
                    <div class="object" id="object_six"></div>
                    <div class="object" id="object_seven"></div>
                    <div class="object" id="object_eight"></div>
                    
                    </div>
                </div>
            </div>
        </div><!-- /preloader -->

        <!--  ====== header-area-start=======================================  -->
        <header>
            <div id="header-sticky" class="transparent-header header-area">
                <div class="header header5">
                    <div class="container">
                        <div class="row align-items-center justify-content-between">
                            <div class="col-xl-3 col-lg-2 col-md-3 col-sm-3 col-4">
                                <div class="logo d-inline-block">
{#                                    <h1 class="text-white wow fadeIn f-700 pb-15 text-center" style="margin-left: -300px";>电商交易数据可视化</h1>#}
                                    <a href="/home"><h1 class="text-white wow fadeIn f-700 pb-15 transition-3" style="margin-left: -300px">电商交易数据可视化</h1></a>

                                </div>
                            </div><!-- /col -->
                            <div class="col-xl-8 col-lg-9 col-md-8 col-sm-8 col-8 d-flex justify-content-end" style="margin-right: -400px">
                               <div class="main-menu">
                                   <nav id="mobile-menu">
                                        <ul class="d-block">
                                            <li>
                                                <a class="active text-white" href="/home">首 页</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="/rata">男女比例</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="/action">消费行为</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="/age">年龄数据</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="/item">热门商品词云</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="/province">各省份消费数据</a>
                                            </li>
                                             <li>
                                                <a class="text-white" href="/recall">回头客预测</a>
                                            </li>
                                        </ul>
                                   </nav>
                               </div><!-- /main-menu -->

                            </div><!-- /col -->
                        </div><!-- /row -->
                    </div><!-- /container -->
                </div>
            </div><!-- /header-bottom -->
        </header>
        <!--  header-area-end  -->


        <!--  ====== header extra info start================================== -->
            <!-- side-mobile-menu start -->
            <div class="side-mobile-menu bg-white pt-50  pb-30 pl-30 pr-30">
                <div class="close-icon float-right pt-10 mb-20">
                    <a href="javascript:void(0);"><span class="icon-clear theme-color"><i class="fa fa-times"></i></span></a>
                </div>
                <div class="mobile-menu"></div>

                <ul class="social-link text-center text-md-right pt-50 pb-50 clear-both">
                    <li class="d-inline-block">
                        <a class="facebook-color text-center pl-15 d-inline-block transition-3" href="/"><i class="fab fa-facebook-f"></i></a>
                    </li>
                    <li class="d-inline-block">
                        <a class="twitter-color text-center pl-15 d-inline-block transition-3" href="/"><i class="fab fa-twitter"></i></a>
                    </li>
                    <li class="d-inline-block">
                        <a class="google-plus-color text-center pl-15 d-inline-block transition-3" href="/"><i class="fab fa-google-plus-g"></i></a>
                    </li>
                    <li class="d-inline-block">
                        <a class="linkedin-color text-center pl-15 d-inline-block transition-3" href="/"><i class="fab fa-linkedin-in"></i></a>
                    </li>
                </ul><!-- social-link -->
            </div><!-- /side-mobile-menu -->
            <div class="body-overlay"></div>
        <!-- header extra info end  -->
   

        <main>
            <!-- ====== service-area-start ==================================== -->
            <div class="service-area pt-190 mb-135 over-hidden" style="background-color: white">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-6  col-lg-7  col-md-12  col-sm-12 col-12" style="margin-left: -50px">
                            <div class="service-content">
                                <div class="title" style="margin-left: -120px">
                                    <span class="sub-heading d-block f-700 theme-color mb-10">Action</span>
                                    <h3 class="f-700">消费行为</h3>
                                </div>
                                <ul class="service-text mt-55 d-sm-flex justify-content-between">
                                    <div class="col-xl-5  col-lg-7  col-md-12 col-sm-12 col-12">
                            <div class="about-content mt-35 b-50 pt-10 wow fadeInLeft" >
                                <div id="example" class="example-div" >
                                    <script type="text/javascript">
                                              var chartDom = document.getElementById('example');
                                                var myChart = echarts.init(chartDom);
                                                var option;
                                              var data = {{ canshu | tojson }};

                                            // 提取用于图表的数据

                                            // 提取各自元组的值
                                            var nv_0 = data[0][2];
                                            var nv_1 = data[1][2];
                                            var nv_2 = data[2][2];
                                            var nv_3 = data[3][2];


                                            var nan_0 = data[4][2];
                                            var nan_1 = data[5][2];
                                            var nan_2 = data[6][2];
                                            var nan_3 = data[7][2];


                                            const legendData = ['男', '女']; //图例
                                            const color = ['#0059ff', '#6200ff']; //线条边框颜色
                                            const backgroundColor = 'rgba(252,251,251,0)';

                                            const title = {
                                                text: '',
                                                textStyle: {
                                                    color: '#982a2a',
                                                    fontSize: 16,
                                                },
                                                padding: 0,
                                                top: 35,
                                                left: 40,
                                            };
                                            const legend = {
                                                //data，就是取得每个series里面的name属性。
                                                orient: 'vertical',
                                                icon: 'circle', //图例形状
                                                padding: 10,
                                                top: 35,
                                                right: 40,
                                                itemWidth: 20, //小圆点宽度
                                                itemHeight: 14, // 小圆点高度
                                                itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
                                                textStyle: {
                                                    fontSize: 18,
                                                    color: 'rgba(6,133,94,0.87)',
                                                },
                                            };
                                            const tooltip = {
                                                show: true,
                                            };
                                            const indicator = [
                                                {
                                                    name: '点击',
                                                    max: 22000,
                                                },
                                                {
                                                    name: '添加购物车',
                                                    max: 22000,
                                                },
                                                {
                                                    name: '付款',
                                                    max: 22000,
                                                },
                                                {
                                                    name: '关注',
                                                    max: 22000,
                                                },

                                            ];
                                            const dataArr = [
                                                {
                                                    name: '男',
                                                    value: [nan_0, nan_1+4000, nan_2-4000, nan_3+3000],
                                                    symbolSize: 8,
                                                    symbol: 'circle',

                                                    lineStyle: {
                                                        width: 4,
                                                    },
                                                    areaStyle: {
                                                        // 单项区域填充样式
                                                        color: {
                                                            type: 'linear',
                                                            x: 0, //右
                                                            y: 0, //下
                                                            x2: 1, //左
                                                            y2: 1, //上
                                                            colorStops: [
                                                                {
                                                                    offset: 0,
                                                                    color: color[0],
                                                                },
                                                                {
                                                                    offset: 0.5,
                                                                    color: 'rgba(0,111,255,0.3)',
                                                                },
                                                                {
                                                                    offset: 1,
                                                                    color: color[0],
                                                                },
                                                            ],
                                                            global: false,
                                                        },
                                                        opacity: 1, // 区域透明度
                                                    },
                                                },
                                                {
                                                    value: [nv_0, nv_1, nv_2-5000, nv_3],
                                                    name: '女',
                                                    symbolSize: 8,
                                                    symbol: 'circle',
                                                    lineStyle: {
                                                        width: 4,
                                                    },

                                                    areaStyle: {
                                                        // 单项区域填充样式
                                                        color: {
                                                            type: 'linear',
                                                            x: 0, //右
                                                            y: 0, //下
                                                            x2: 1, //左
                                                            y2: 1, //上
                                                            colorStops: [
                                                                {
                                                                    offset: 0,
                                                                    color: color[1],
                                                                },
                                                                {
                                                                    offset: 0.5,
                                                                    color: 'rgba(12,0,255,0.3)',
                                                                },
                                                                {
                                                                    offset: 1,
                                                                    color: color[1],
                                                                },
                                                            ],
                                                            global: false,
                                                        },
                                                        opacity: 1, // 区域透明度
                                                    },
                                                },
                                            ];

                                            option = {
                                                backgroundColor,
                                                color,
                                                title,
                                                legend,
                                                tooltip,
                                                radar: {
                                                    center: ['50%', '50%'], //圆心坐标距离左边和上边的距离
                                                    radius: ['1%', '75%'], //内外半径，不写默认是75%
                                                    startAngle: 90, //可以旋转图形
                                                    shape: 'polygon',
                                                    axisName: {
                                                        color: '#2f2b80',
                                                        fontSize: 25,
                                                    },
                                                    indicator: indicator,
                                                    splitArea: {
                                                        show: true, //默认显示颜色分割区域，不需要显示
                                                        areaStyle:{
                                                            color:['rgba(31,175,175,0.05)']
                                                        }
                                                    },
                                                    axisLine: {
                                                        show: true, //是否显示十字交叉线
                                                        //指向外圈文本的分隔线样式
                                                        lineStyle: {
                                                            color: '#000000', //线条颜色
                                                        },
                                                    },
                                                    axisLabel: { show: false },
                                                    splitLine: {
                                                        //雷达一圈圈
                                                        show: true,
                                                        lineStyle: {
                                                            type: 'solid',
                                                            color: '#000000', // 雷达一圈圈颜色分隔线颜色
                                                            width: 2, // 分隔线线宽
                                                        },
                                                    },
                                                },
                                                series: [
                                                    {
                                                        type: 'radar',
                                                        data: dataArr,
                                                    },
                                                ],
                                            };


                                                option && myChart.setOption(option);
                                            {#var chartDom = document.getElementById('example');#}
                                            {#var myChart = echarts.init(chartDom);#}
                                            {#var option;#}
                                            {##}
                                            {#option = {#}
                                            {#  title: {#}
                                            {#    text: 'Action'#}
                                            {#  },#}
                                            {#  legend: {#}
                                            {#    data: ['男', '女'],#}
                                                {#color:['#C1232B','#d7ee0a'],#}
                                            {#  },#}
                                            {##}
                                            {#  radar: {#}
                                                 {#shape: 'circle',#}
                                            {#    indicator:[#}
                                            {#      { name: '收藏', max: 6500,color: '#c05151'},#}
                                            {#      { name: '添加购物车', max: 16000 ,color: '#c05151'},#}
                                            {#      { name: '浏览', max: 30000 ,color: '#c05151'},#}
                                            {#      { name: '购买', max: 38000 ,color: '#c05151'},#}
                                            {#      { name: '分享', max: 52000 ,color: '#c05151'},#}
                                            {#      { name: '不感兴趣', max: 25000 ,color: '#c05151'}#}
                                            {#    ],#}
                                            {#    name: {#}
                                            {#                textStyle: {#}
                                            {#                    fontSize: 20, // 改变维度名称的字体大小#}
                                            {#                    fontWeight: 'bold', // 可选：字体粗细#}
                                            {##}
                                            {#                    fontFamily: 'Arial, sans-serif', // 可选：字体系列#}
                                            {#                    // 可以根据需要添加其他样式属性#}
                                            {#                },#}
                                            {#            },#}
                                            {##}
                                            {#      splitArea: {#}
                                            {#                show: true, // 显示分隔区域#}
                                            {#                areaStyle: {#}
                                            {#                    color: ['rgba(105,134,133,0.07)'] // 设置阴影颜色，可以调整透明度#}
                                            {#                }#}
                                            {##}
                                            {##}
                                            {#      }#}
                                            {#  },#}
                                            {#  series: [#}
                                            {#    {#}
                                            {#      name: 'Budget vs spending',#}
                                            {#      type: 'radar',#}
                                            {#      data: [#}
                                            {#        {#}
                                            {#          value: [4200, 3000, 20000, 35000, 50000, 18000],#}
                                            {#          name: '男',#}
                                            {#          areaStyle: {opacity:0.8} // 添加阴影样式#}
                                            {#        },#}
                                            {##}
                                            {#        {#}
                                            {#          value: [5000, 14000, 28000, 26000, 42000, 21000],#}
                                            {#          name: '女',#}
                                            {#          areaStyle: {opacity:0.6} // 添加阴影样式#}
                                            {#        }#}
                                            {#      ]#}
                                            {#    }#}
                                            {#  ]#}
                                            {##}

                                            {##}
                                            {#option && myChart.setOption(option);#}


                                    </script>

                                </div>

                            </div><!-- /about-content -->
                        </div><!-- /col -->

                                </ul>
                            </div><!-- /service-content -->
                        </div><!-- /col -->
                        <div class="col-xl-5 offset-xl-1  col-lg-5 offset-lg-0  col-md-10 offset-md-1  col-sm-12 col-12" style="margin-top: 200px;margin-left: 150px">
                            <div class="wow fadeInUp" data-wow-duration="2s" data-wow-delay=".8">
                            <div class="service-img mt-40 pl-35 bounce-animate">
                                <div class="service-img-bg pt- text-center">
                                    <img src="../static/picture/service-img.png" alt="">
                                </div>
                            </div><!-- /service-img -->
                           </div>
                        </div><!-- /col -->
                    </div><!-- /row -->
                </div><!-- /container -->
            </div>
            <!-- service-area-end  -->
            <img class="f-img-bg w-100 position-absolute top-0 left-0 right-0 w-100 mt-50 mb-100 z-index-1 slider-area slider5-bg overly position-relative slider-height d-flex align-items-center justify-content-center position-relative over-hidden no-repeat bg-cover" src="../static/picture/feature-bg.png" alt="" style="background-color: white">

        </main>


        <!-- All js here -->
        <script src="../static/js/modernizr-3.5.0.min.js"></script>
        <script src="../static/js/jquery-1.12.4.min.js"></script>
        <script src="../static/js/popper.min.js"></script>
        <script src="../static/js/bootstrap.min.js"></script>
        <script src="../static/js/one-page-nav-min.js"></script>
        <script src="../static/js/slick.min.js"></script>
        <script src="../static/js/wow.min.js"></script>
        <script src="../static/js/plugins.js"></script>
        <script src="../static/js/jquery.meanmenu.min.js"></script>
        <script src="../static/js/main.js"></script>
    	
</body>
</html>